<template>
	<div class="prerecord-native-video-input">
		<el-form-item :label="label" :required="required" :prop="required ? prop : ''" :rules="rules">
			<el-input :value="video" :disabled="showDetail" @input="updateValue" @click.native="showVideoTable" @change="onChange" :id="prop" :class="getInputClass"> </el-input>
			<div class="native-video" v-if="video">
				<el-button class="choose-btn" @click="showVideoTable" :disabled="showDetail">
					<span v-if="video.fileName.length > 40">{{ video.fileName | flieOmit(30, -1) }}</span>
					<span v-else>{{ video.fileName }}</span>
					<span class="tips" v-if="video.fileName">{{ video.fileName }}</span>
				</el-button>
				<span class="close" @click="clearVideo">x</span>
			</div>
		</el-form-item>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow.js';

export default {
	props: {
		label: {
			type: String,
			default: () => 'AI说'
		},
		value: {
			type: Object,
			required: true,
			default: () => {}
		},
		placeholder: {
			type: String,
			default: () => '请编辑AI客服播报的话术'
		},
		maxlength: {
			type: Number,
			default: () => 140
		},
		video: {
			type: [Object || null],
			default: () => {}
		},
		required: {
			type: Boolean,
			default: () => false
		},
		prop: {
			type: String,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		validateStatus: {
			type: Boolean,
			default: () => true
		},
		textArea: {
			type: Boolean,
			default: () => false
		},
		rules: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		isNumber() {
			return prop => {
				return AIWorkflow.getNumberTypeProperty(prop);
			};
		},
		getInputClass() {
			let className = 'normal-icon-video video-input-size';
			if (!this.validateStatus) {
				className = 'error-icon-video video-input-size';
			} else if (this.validateStatus && this.video) {
				className = 'normal-icon-video video-input-hidden';
			}
			return className;
		}
	},

	data() {
		return {
			className: 'normal-icon-video video-input-size'
		};
	},

	watch: {
		video: {
			handler(val) {
				if (val) {
					this.className = 'normal-icon-video video-input-hidden';
				} else {
					this.className = 'normal-icon-video video-input-size';
				}
			},
			deep: true
		}
	},

	mounted() {
		this.$nextTick(() => {
			if (!this.video) {
				this.className = 'normal-icon-video video-input-size';
			} else {
				this.className = 'normal-icon-video video-input-hidden';
			}
		});
	},

	methods: {
		updateValue(e) {
			this.$emit('input', this.prop, e);
		},
		showVideoTable() {
			this.$emit('showVideoTable', this.prop);
		},
		clearVideo() {
			this.$emit('clearVideo', this.prop);
		},
		onChange() {}
	}
};
</script>

<style lang="less" scoped></style>
